<template>
	<body-wrap isFlex>
		<view class="formBox">
			<view class="formItemBox">
				<view class="title">公司名称</view>
				<view class="srkbox">
					<view class="fmipbox fmipbox4">
						<input class="myInput" :disabled="!isEdit" v-model="fmData.name" placeholder="请输入公司名称" />
					</view>
					<view class="fibtn" @click="show=true">选择公司</view>
				</view>
			</view>
			<!-- <view class="formItemBox">
				<view class="title">负责人姓名</view>
				<view class="srkbox">
					<view class="fmipbox fmipbox4">
						<input class="myInput" :disabled="!isEdit" v-model="fmData.headName" placeholder="请输入负责人姓名" />
					</view>
					<view class="fibtn" @click="setHead">设为自己</view>
				</view>
			</view> -->
			<view class="formItemBox">
				<view class="title">负责人姓名</view>
				<view class="fmipbox">
					<input class="myInput" :disabled="!isEdit" v-model="fmData.headName" placeholder="请输入负责人姓名" />
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">负责人电话</view>
				<view class="fmipbox">
					<input class="myInput" :disabled="!isEdit" v-model="fmData.headPhone" placeholder="请输入负责人电话" />
				</view>
			</view>

		</view>
		<template #footer>
			<view class="footer-btn-box">
				<view class="myBtn" @click="save">确定</view>
			</view>
		</template>
		
		<m-picker v-if="companys" mode="bottom" :show.sync="show" :range="companys" rangeKey="name" @confirm="confirmSelect" @cancel="show=false"/>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import mPicker from '@/components/jarvis-picker/m-picker.vue';
	import {getCompanyList,addCustom,addCompany} from "@/api/consult.js"
	import {updateUserInfo} from "@/api/base.js"
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap,
			mPicker
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				selectTeacher:computed(()=>store.state.base.selectTeacher),
				userInfo:computed(()=>store.state.base.userInfo),
				orderInfo:computed(()=>store.state.base.orderInfo),
				fmData:{privacy:1},
				companys:'',
				show: false,
				isEdit:true,
				select_companyId:''
			})
			
			onMounted(()=>{
				console.log("orderInfo:",state.orderInfo)
				if(state.userInfo.companyId && state.userInfo.companyId.length>0){
					// 获取当前账户所在的公司，即时某公司的员工
					getCompanyList({
						_id:state.userInfo.companyId
					}).then(res =>{
						if(res.code == 200){
							state.companys = [res.data.data]
						}
					})
				}
				// 默认负责人为当前用户
				state.fmData.headName = state.userInfo.name
				state.fmData.headPhone = state.userInfo.phone
			})
			
			const setHead =()=> {
				state.fmData.head = state.userInfo._id
				state.fmData.headName = state.userInfo.name
				state.fmData.headPhone = state.userInfo.phone
			}
			
			const confirmSelect =(indexs)=> {
				console.log('确定选择的公司：',state.companys[0][indexs[0]]);
				const curCompany = state.companys[0][indexs[0]]
				state.fmData.name = curCompany.name
				state.fmData.headName = curCompany.headName
				state.fmData.headPhone = curCompany.headPhone
				state.select_companyId = curCompany._id
				state.isEdit = false
				state.show = false
			}
			
			const save = async ()=>{
				if(!state.fmData.name){
					return toast('请输入公司名称')
				}else if(!state.fmData.headName){
					return toast('请输入公司负责人姓名')
				}else if(!state.fmData.headPhone){
					return toast('请输入公司负责人电话')
				}
				if(state.select_companyId){ // 说明选择了公司
					// 把该公司添加为发布咨询包公司的客户
					if(state.orderInfo.product.owner){
						const res = await add_custom(state.select_companyId)
					}
				}else{
					// 新增公司
					const res = await addCompany(state.fmData)
					if(res.code!=200){
						return toast('新增公司失败')
					}
					state.select_companyId = res.data._id
					// 把该公司添加为发布咨询包公司的客户
					await add_custom(res.data._id)
					
					// 更新该用户信息，使其成为该公司的成员
					await updateUserInfo({
						_id:state.userInfo._id,
						companyId:res.data._id
					})
					
					const urt = await getUserInfo(state.userInfo._id)  // 重新获取用户信息
					if(urt.code == 200){
						store.commit('base/set_userInfo',urt.data)
					}
				}
				store.commit('base/set_orderInfo',{
					operatorId:state.userInfo._id, // 操作人id
					companyId:state.select_companyId, // 购买公司ID
					companyName:state.fmData.name, // 购买公司名称
				})
				uni.navigateTo({
					url:'/pages/order/order'
				})
			}
			
			const add_custom = (customId)=>{
				// 添加公司
				return addCustom({
					serviceId:state.orderInfo.product.owner,
					serviceType:state.orderInfo.product.ownerType, // 服务主类型：企业
					customType:2,
					customId,
					//experter:experter.value  // 服务专家
				})
			}
			
			return {
				...toRefs(state),
				setHead,
				confirmSelect,
				save
			}
		}
	})
</script>

<style lang="scss" scoped>
	.formBox{
		padding:0 20rpx 20rpx 20rpx;
	}
	.formItemBox{
		margin: 20rpx 0 0 0;
		.title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			height: 70rpx;
			&:before{
				content: '';
				display: block;
				width: 7rpx;
				height: 30rpx;
				background: #e3af2f;
				margin: 0 10rpx 0 0;
			}
		}
		.srkbox{
			display: flex;
			width: 100%;
			.fibtn{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;
				width: 160rpx;
				background: rgba(5, 172, 60,0.2);
				box-sizing: border-box;
				border: 1px solid #e5e5e5;
				border-left:0 ;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				font-size: 26rpx;
			}
		}
		.fmipbox{
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			border-radius: 5px;
			height: 70rpx;
			padding: 0 15rpx;
			background: #fff;
			flex: 1;
			flex-shrink: 0;
			&.fmipbox2{
				height: auto;
			}
			&.fmipbox3{
				display: flex;
				height: auto;
				border: none;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.teacherBox{
					flex: 1;
				}
				.iconfont{
					display: flex;
					align-items: center;
				}
			}
			&.fmipbox4{
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			.myInput{
				width: 100%;
				height: 100%;
			}
			.myTextarea{
				width: 100%;
				height: 250rpx;
				padding:15rpx 0;
			}
			.itemrbbox{
				display: flex;
				&+.itemrbbox{
					margin-top: 20rpx;
				}
				.fmtips{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
</style>
